<template>
  <div class="bigBox">
    <div id="container"></div>
  </div>
</template>

<script lang="ts" setup>
// imports

import { load } from '@amap/amap-jsapi-loader'
import { ref, onMounted, onUnmounted } from 'vue'

let map = ref<any>()
let AMap = ref<any>()

interface IMarker {
  lon: number
  lat: number
  title: string
  time?: string
  number?: string | number
}
const markerList = ref<IMarker[]>([
  {
    lon: 111.434378,
    lat: 30.531133,
    title: '猇亭区人民政府',
    time: '2024-09-28 12:12:12',
    number: 23,
  },
  {
    lon: 111.439075,
    lat: 30.530977,
    title: '宜昌正大有限公司',
    time: '2024-02-28 02:45:18',
    number: 99,
  },
  {
    lon: 111.433585,
    lat: 30.528885,
    title: '宜昌市第五人民医院',
    time: '2024-06-14 15:45:45',
    number: 45,
  },
  {
    lon: 111.432649,
    lat: 30.525301,
    title: '宜昌市长江中学',
    time: '2024-06-14 15:45:45',
    number: 45,
  },
])

// props

// emits

// refs

// computed

// methods
let initMap = async () => {
  AMap.value = await load({
    key: '4b47c3b15b2c298a9d9e174be21d7ee7', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    // plugins:[''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
  map.value = new AMap.value.Map('container', {
    // 设置地图容器id
    viewMode: '3D', // 是否为3D地图模式
    zoom: 13, // 初始化地图级别
    // center:[113.808299,34.791787], // 初始化地图中心点位置，不设置的时候默认展示当前位置
  })

  addMarkers()
}

// 添加marker海量点标记
const addMarkers = () => {
  let stationMarkers: IMarker[] = []
  markerList.value?.forEach((item) => {
    let marker = new AMap.value.Marker({
      map: map.value,
      position: [item.lon, item.lat],
      offset: new AMap.value.Pixel(-16, 0),
      icon: '',
      data: item,
    })
    // 点击点标记展示信息窗体
    marker.on('click', (e: any) => {
      showBusInfoWindow({ ...item, ...e })
    })
    stationMarkers.push(marker)
  })
  map.value.add(stationMarkers)
  map.value.setFitView()
}

// 展示信息窗体
const showBusInfoWindow = (e: any) => {
  let infoWindow = new AMap.value.InfoWindow({
    isCustom: true, //使用自定义窗体
    content: `<div class="info-window">
      <div class="closeBtn" onclick="closeClick">关闭</div>
      <div class="content">
         <div class="item">地点：${e.title}</div>
        <div class="item">时间：${e.time}</div>
        <div class="item">数量：${e.number}</div>
      </div>
    </div>`,
    anchor: 'bottom-center',
    offset: new AMap.value.Pixel(16, -25),
  })
  infoWindow.open(map.value, [e.lnglat.lng, e.lnglat.lat])
  // 添加关闭按钮的点击事件
  const closeButton: any = document.querySelector('.closeBtn')
  if (closeButton) {
    closeButton.onclick = () => {
      infoWindow.close()
    }
  }
}

onMounted(() => {
  initMap()
})

onUnmounted(() => {
  map.value?.destroy()
})
</script>
<style lang="scss" scoped>
.bigBox {
  width: 100%;
  height: 100%;
  position: relative;

  #container {
    width: 100%;
    height: 100%;
  }

  :deep(.info-window) {
    background-color: #fff;
    min-width: 200px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);

    .closeBtn {
      color: #3478c6;
      text-align: right;
      padding: 10px 20px 0 0;
      cursor: pointer;
    }

    .content {
      padding: 20px;
      color: #000;
      font-size: 16px;

      .item {
        margin-bottom: 10px;
      }
    }
  }
}
</style>
